import { GUI } from 'dat.gui'
import { config } from './config'
import Trigger from './trigger';

export default class DataGUI extends Trigger {
    constructor(engine) {
        super();
        this.engine = engine;

        this.init();
        this.on('all', (e) => {
            console.log(e);
            this.engine.renderForce();
            const gl = this.engine.gl;
            if (e.type === 'change' && e.name === 'clearColor') console.log(gl.getParameter(gl.COLOR_CLEAR_VALUE));
            if (e.type === 'change' && e.name === 'clearDepth') console.log(gl.getParameter(gl.DEPTH_CLEAR_VALUE));
            if (e.type === 'change' && e.name === 'clearStencil') console.log(gl.getParameter(gl.STENCIL_CLEAR_VALUE));
        });
    }

    init() {
        const gui = this.gui = new GUI();
        // basic
        let basic = gui.addFolder('Basic');
        for (let a in config.basic) {
            let v = config.basic[a];
            if (v.type === 'boolean') {
                basic.add(v, 'value').name(v.name).listen().onChange((e) => {
                    this.fire({ type: "change", name: a, value: e });
                    v.onChange && v.onChange(e);
                });
            }
        }

        // webgl
        let webgl = gui.addFolder('WebGL API');
        const onChanges = {};
        for (let a in config.webgl) {
            let v = config.webgl[a];
            onChanges[a] = v.onChange;
        }
        for (let a in config.webgl) {
            let v = config.webgl[a];
            if (v.type === 'folder') {
                let folder = webgl.addFolder(v.name);
                for (let aa in v) {
                    let vv = v[aa];
                    if (vv.type === 'boolean') {
                        folder.add(vv, 'value').name(vv.name).listen().onChange((e) => {
                            this.fire({ type: "change", name: aa, value: e });
                        });
                    } else if (vv.type === 'color') {
                        folder.addColor(vv, 'value').name(vv.name).listen().onChange((e) => {
                            this.fire({ type: "change", name: aa, value: e });
                        });
                    } else if (vv.type === 'number') {
                        folder.add(vv, 'value', vv.min, vv.max).step(vv.step).name(vv.name).listen().onChange((e) => {
                            this.fire({ type: "change", name: aa, value: e });
                        });
                    } else if (vv.type === 'selector') {
                        folder.add(vv, 'value', vv.options).name(vv.name).listen().onChange((e) => {
                            this.fire({ type: "change", name: aa, value: e });
                        });
                    }
                }
            } else if (v.type === 'boolean') {
                webgl.add(v, 'value').name(v.name).listen().onChange((e) => {
                    this.fire({ type: "change", name: a, value: e });
                    let onChange = onChanges[a];
                    onChange && onChange(e);
                });
            } else if (v.type === 'color') {
                webgl.addColor(v, 'value').name(v.name).listen().onChange((e) => {
                    this.fire({ type: "change", name: a, value: e });
                    let onChange = onChanges[a];
                    onChange && onChange(e);
                });
            } else if (v.type === 'number') {
                webgl.add(v, 'value', v.min, v.max).step(v.step).name(v.name).listen().onChange((e) => {
                    this.fire({ type: "change", name: a, value: e });
                    let onChange = onChanges[a];
                    onChange && onChange(e);
                });
            } else if (v.type === 'selector') {
                folder.add(v, 'value', v.options).name(v.name).listen().onChange((e) => {
                    this.fire({ type: "change", name: aa, value: e });
                });
            }
        }

    }
}

